
<template>
  <basic-container>
    <div class="title">{{ currentTableName }}</div>
    <div>
      <el-button
        v-for="table in tableOptions"
        :key="table.verfiyConfirmFlag"
        :type="currentTable === table.verfiyConfirmFlag ? 'primary' : undefined"
        class="table-opt"
        @click="currentTable = table.verfiyConfirmFlag"
      >
        {{ table.verifyConfirmName }}
      </el-button>
    </div>
    <TempData
      v-if="target"
      :currentTable="currentTable"
      @close="$emit('close')"
      :query="{ tradeDate: target.tradeDate }"
      mode="preview"
    />
  </basic-container>
</template>

<script>
import { fetchList, tables } from "@/api/rca/swckbomsmallpayment";
import { dateFormat } from '@/util/date'
import { mapGetters } from "vuex";
import TempData from "./TempData";

export default {
  name: "Preview",
  components: {
    TempData,
  },
  data () {
    return {
      currentTable: '1',
      tableOptions: [],
    };
  },
  props: ["target"],
  computed: {
    ...mapGetters(["permissions"]),
    currentTableName () {
      const { currentTable, tableOptions } = this;
      const table = tableOptions.find(table => table.verfiyConfirmFlag === currentTable);
      return table && table.verifyConfirmName
    },
    permissionList () {
      return {
        addBtn: this.vaildData(
          this.permissions.generator_swckbankverifypayment_add,
          false
        ),
        delBtn: this.vaildData(
          this.permissions.generator_swckbankverifypayment_del,
          false
        ),
        editBtn: this.vaildData(
          this.permissions.generator_swckbankverifypayment_edit,
          false
        ),
      };
    },
  },
  created () {
    this.loadTables();
  },
  methods: {
    async loadTables () {
      this.tableOptions = [{
        verfiyConfirmFlag: "1",
        verifyConfirmName: "微信",
      }, {
        verfiyConfirmFlag: "2",
        verifyConfirmName: "支付宝",
      }];
    },
  }
}
</script>
<style scoped lang="scss">
.table-opt {
  margin-left: 0;
  margin-right: 20px;
  margin-bottom: 20px;
}
.title {
  line-height: 30px;
  border-left: 2px solid blue;
  padding: 0 20px;
  margin-bottom: 30px;
}
</style>
